<template>
	<transition name='slide-down'>
		<div class="ebook-shelf"
				 v-show='menuVisible && settingVisible === 4'>
			<div class="shelf-info-wrapper"
					 v-for="(item,index) in bookList" :key="index"
					 @click="bookClick(index)">
				<div class="shelf-info-img">
					<img :src="bookList[index].imgUrl" alt="">
				</div>
				<div class="shelf-info-name">
					{{bookList[index].name}}
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import { ebookMixin } from 'utils/mixin'
	import { BOOK_LIST } from 'utils/book'
	import { getDefaultBook, saveDefaultBook } from 'utils/localStorage'

	export default {
		name: "EbookShelf",
		mixins: [ebookMixin],
		data() {
			return {
				bookList: BOOK_LIST
			}
		},
		methods: {
			bookClick(index) {
				let i = getDefaultBook()
				if (index !== i) {
					saveDefaultBook(index)
					this.setDefaultBook(index)
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
@import 'assets/styles/global';
	
.ebook-shelf {
	position: absolute;
	top: px2rem(43);
	left: 0;
	z-index: 500;
	width: 100%;
	height: px2rem(90);
	background: white;
	box-shadow: 0 px2rem(4) px2rem(6) rgba(0, 0, 0, .1);
	display: flex;
	flex: 1;
	.shelf-info-wrapper {
		display: flex;
		@include center;
		width: 100%;
		flex-direction: column;
		.shelf-info-img img{
			width: px2rem(45);
      height: px2rem(60);
		}
		.shelf-info-name {
			text-align: center;
			width: px2rem(100);
      font-size: px2rem(10);
      @include ellipsis;
		}
	}
}
	
</style>